<!DOCTYPE html>

<head>
    <meta charset="utf8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="myapp">
        <!-- v-model 控制单选+获取选项value -->
        <input type="radio" value="page1" v-model="page">页面一
        <input type="radio" value="page2" v-model="page">页面二
        <component :is="page">{{page}}</component>

    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                page: "page1"
            }
        },
    });
    const page1 = {
        template:
            `<div style="color: palevioletred;">
                <slot>页面一</slot>
            </div>`
    }
    const page2 = {
        template:
            `<div style="color: blueviolet;">
                <slot>页面二</slot>
            </div>`
    }
    app.component("page1", page1);
    app.component("page2", page2);

    app.mount("#myapp");
</script>